<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<title>21001010615 魏思怡 虎牙直播</title>
    <link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="./fonts/font_4283921_k7csj3k1y3/iconfont.css">
</head>
<style>
	
</style>
<body>
	<header id="top">
        
		<div class="search">
			<span class="iconfont icon-sousuo "></span>
			<input type="text" name="search" id="search" placeholder="输入你想搜索的主播或房间号">
            <span class="iconfont icon-saomiao "></span>
		</div>
			<div>
                <span class="iconfont icon-youxi "></span>
			</div>
            <div>
                <span class="iconfont icon-daibanrenwu  "></span>
			</div>
            <div>
                <span class="iconfont icon-icon_tianjia "></span>
			</div>
	</header>
    <div class="mask" style="display: none;"></div>
	<nav class="snav">
		<div class="top">
			<ul>
				<li class="selected">推荐<div class="pic"></div>
				</li>
				<li>热门<div class="pic none"></div>
				</li>
				<li>CS2<div class="pic none"></div>
				</li>
				<li>LOL<div class="pic none"></div>
                </li>
                <li>主机<div class="pic none"></div>
                </li>
                <li>娱乐<div class="pic none"></div>
                </li>
                <li>CF<div class="pic none"></div>
                </li>
                <li>DNF</li><div class="pic none"></div>
                </li>
                <li>暴雪<div class="pic none"></div>
                </li>
			</ul>
		</div>
    
	<main class="box">
        <!-- 推荐 -->
        <div class="tuijian">
            <ul class="list">
            <li>
                <a href="#">
                    <img src="./images/1.png">
                </a>
                <p>巅峰赛冲分</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/2.png">
                </a>
                <p>韩服复健</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/3.png">
                </a>
                <p>玩会组排</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/4.png">
                </a>
                <p>绝食流打野教学</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/5.png">
                </a>
                <p>新主播求关注</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/6.png">
                </a>
                <p>来喽来喽</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/7.jpg">
                </a>
                <p>中单刺客教学</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/8.jpg">
                </a>
                <p>BUG一样的存在!</p> 
            </li>
            <li>
                <a href="#">
                    <img src="./images/5.png">
                </a>
                <p>新主播求关注</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/5.png">
                </a>
                <p>新主播求关注</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/5.png">
                </a>
                <p>新主播求关注</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/5.png">
                </a>
                <p>新主播求关注</p>
            </li>
        </ul>
    </div>
    </main>
	<main class="box none">

        <!-- 热门 -->
        <div class="tuijian">
            <ul class="list">
            <li>
                <a href="#">
                    <img src="./images/CS23.png">
                </a>
                <p>巅峰赛冲分</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/2.png">
                </a>
                <p>韩服复健</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/CS21.png">
                </a>
                <p>玩会组排</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/4.png">
                </a>
                <p>绝食流打野教学</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/5.png">
                </a>
                <p>新主播求关注</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/6.png">
                </a>
                <p>来喽来喽</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/7.jpg">
                </a>
                <p>中单刺客教学</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/8.jpg">
                </a>
                <p>BUG一样的存在!</p> 
            </li>
            <li>
                <a href="#">
                    <img src="./images/CS23.png">
                </a>
                <p>新主播求关注</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/CS23.png">
                </a>
                <p>新主播求关注</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/CS24.png">
                </a>
                <p>新主播求关注</p>
            </li>
            <li>
                <a href="#">
                    <img src="./images/CS24.png">
                </a>
                <p>新主播求关注</p>
            </li>
        </ul>
    </div>
    <!-- CS2 -->
    </main>
	<main class="box none"> 
        <!-- LOL -->
        <div class="tuijian">
        <ul class="list">
        <li>
            <a href="#">
                <img src="./images/lol1.png">
            </a>
            <p>巅峰赛冲分</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/lol2.png">
            </a>
            <p>韩服复健</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/3.png">
            </a>
            <p>玩会组排</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/4.png">
            </a>
            <p>绝食流打野教学</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/lol3.png">
            </a>
            <p>新主播求关注</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/6.png">
            </a>
            <p>来喽来喽</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/lol4.png">
            </a>
            <p>中单刺客教学</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/8.jpg">
            </a>
            <p>BUG一样的存在!</p> 
        </li>
        <li>
            <a href="#">
                <img src="./images/6.png">
            </a>
            <p>新主播求关注</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/lol4.png">
            </a>
            <p>新主播求关注</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/lol4.png">
            </a>
            <p>新主播求关注</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/lol1.png">
            </a>
            <p>新主播求关注</p>
        </li>
    </ul>
</div>
</main>
	<main class="box none"> <div class="tuijian">
        <ul class="list">
        <li>
            <a href="#">
                <img src="./images/lol4.png">
            </a>
            <p>巅峰赛冲分</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/2.png">
            </a>
            <p>韩服复健</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/3.png">
            </a>
            <p>玩会组排</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/4.png">
            </a>
            <p>绝食流打野教学</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/5.png">
            </a>
            <p>新主播求关注</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/6.png">
            </a>
            <p>来喽来喽</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/7.jpg">
            </a>
            <p>中单刺客教学</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/8.jpg">
            </a>
            <p>BUG一样的存在!</p> 
        </li>
        <li>
            <a href="#">
                <img src="./images/lol4.png">
            </a>
            <p>新主播求关注</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/lol4.png">
            </a>
            <p>新主播求关注</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/lol3.png">
            </a>
            <p>新主播求关注</p>
        </li>
        <li>
            <a href="#">
                <img src="./images/lol3.png">
            </a>
            <p>新主播求关注</p>
        </li>
    </ul>
</div></main>
	<main class="box none">主机</main>
	<main class="box none">户外</main>
    <main class="box none">娱乐</main>
    <main class="box none">CF</main>
    <main class="box none">DNF</main>
    <main class="box none">暴雪</main>
    <nav class="bnav"><!-- 下导航 -->
        <ul>
            <li class="selected_1">
                <div>
                    <a href="./index.html"><span class="iconfont icon-shouye"></span>
                        <p>首页</p></a>
                </div>
            </li>
            <li >
                <div>
                    <a href="./1.5.html"><span class="iconfont icon-dingyue1"></span>
                        <p>订阅</p></a>
                </div>
            </li>
            <li >
                <div>
                    <a href="./match.html"> <span class="iconfont icon-saishi"></span>
                        <p>赛事</p></a>
                </div>
            </li>
            <li >
                <div>
                    <a href="./benefit.html"><span class="iconfont icon-fuli"></span>
                        <p>福利</p></a>
                </div>
            </li>
            <li >
                <div>
                    <a href="./my.html"><span class="iconfont icon-wode"></span>
                        <p>我的</p></a>
                </div>
            </li>
        </ul>
    </nav>

<!-- json -->
<div id="main">
    <div class="content">
        <ul class="jlist"></ul>
    </div>
    <div class="content">
        <ul class="jlist2" ></ul>
    </div>
    <div class="content">
        <ul class="jlist3" ></ul>
    </div>
    <div class="content">
        <ul class="jlist4" ></ul>
    </div>
  </div>

</body>
<script src="./js/common.js"></script>

<script>
var tabs = document.querySelectorAll("body")
for (let i = 0; i < tabs.length; i++) {
    tab(tabs[i]);
}

function tab(main) {
    var li = main.querySelectorAll(".top li");
   var content = main.querySelectorAll(".content");
    var box = main.querySelectorAll(".box");
    console.log(box);
    for (let i = 0; i < li.length; i++) {
        li[i].onclick = () => {
            for (let j = 0; j < li.length; j++) {
                li[j].classList.remove("selected")
                box[j].classList.add("none");
                if(i==4)
                content[0].style.display="block";
            else
            content[0].style.display="none";
            }
            li[i].classList.add("selected");
            box[i].classList.remove("none");
        }
    }
   
}
</script>
</html>